<template>
<div v-loading="loading" style="width: 100vw;height: 100vh;background: #EEEEEE">
  <top :title="title"></top>
  <el-row>
    <el-carousel height="150px">
      <el-carousel-item v-for="item in swiperList" :key="item">
        <img :src="item" style="width: 100%;height: 100%;" alt="">
      </el-carousel-item>
    </el-carousel>
  </el-row>
  <el-row>
    <div class="school-container">
      <div class="school-new" v-for="(item, index) in newsList" :key="index">
        <div class="new-left">
          <img :src="item.img" style="width: 30vw;height: auto ;" alt="">
        </div>
        <div class="new-right">
          <p class="new-title">{{ item.title }}</p>
          <p class="new-content">{{ item.content }}</p>
        </div>
      </div>
    </div>
  </el-row>
  <bottom :selectIndex="1"></bottom>
</div>
</template>

<script>
import top from '@/components/top'
import bottom from '@/components/bottom'
export default {
  name: 'school',
  data () {
    return {
      loading: false,
      title: '浙科学工系统',
      swiperList: [
        require('../assets/school/浙科12.jpg'),
        require('../assets/school/浙科4.jpg'),
        require('../assets/school/浙科13.jpg'),
        require('../assets/school/浙科14.jpg')
      ],
      newsList: [
        {
          newsId: 0,
          img: require('../assets/school/党史学习1.jpg'),
          title: '学校召开第九届教代会暨第十二届啊啊啊啊啊啊啊啊阿',
          content: '5月25日，50年以上党龄老党员、校关工委成员与青年学...'
        }, {
          newsId: 1,
          img: require('../assets/school/党史教育.jpg'),
          title: '学校离退休老党员与青年学生共学...',
          content: '5月25日，50年以上党龄老党员、校关工委成员与青年学...'
        }, {
          newsId: 3,
          img: require('../assets/school/党史教育2.jpg'),
          title: '校党委理论中心组集体学习（扩大',
          content: '5月17日，校党委理论学习中心组集体学习（扩大）会议...'
        }, {
          newsId: 4,
          img: require('../assets/school/教代会.jpg'),
          title: '如何抓好教师思想政治和师德师风...',
          content: '5月10日，教育部召开教师思想政治和师德师风建设经验...'
        }
      ]
    }
  },
  components: {
    top,
    bottom
  }
}
</script>

<style lang="stylus" scoped>
.school-container
  width: 84vw
  height auto
  margin: 4vh auto
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: white
  padding: 2vh 2vw
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
.school-new
  width: 76vw
  margin: 2vh auto
  height: 10vh
  display: flex
  align-items center
  justify-content space-between
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  padding-bottom: 1vh
  //background: pink
.new-left
  height: 100%
  width: 40vw
  margin-left: 2vw
  display flex
  align-items center
  justify-content center
.new-right
  display flex
  flex-direction column
  justify-content flex-start
  align-items flex-start
  //margin-left: 1vw
.new-title
  width: 40vw
  height: 2vh
  font-size: 0.6rem
  font-weight: bold;
  white-space nowrap
  overflow hidden
  text-overflow : ellipsis
.new-content
  width: 40vw
  height: 8vh
  font-size:0.4rem
  //text-overflow : ellipsis

</style>
